import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import React from 'react';
import Detail from '@/views/Detail';
import Category from '@/views/home/Category/index';
import {Provider} from 'react-redux';
import store from '@/store/index';
import {StatusBar, Platform, StyleSheet, Animated} from 'react-native';
import BottomTabs from './bottomTabs';
import Album from '@/views/Album/index';

const styles = StyleSheet.create({
  headerBackground: {
    flex: 1,
    backgroundColor: '#ddd',
    opacity: 0,
  },
  headerBackImage: {
    marginHorizontal: Platform.OS === 'android' ? 0 : 8,
  },
});
// 创建Stack
const Stack = createNativeStackNavigator();
// 动态获取标题栏
function getAlbumOptions({route}: {route: any}) {
  return {
    headerTitle: route.params.title,
    headerTransparent: true,
    headerTitleStyle: {
      opacity: 0,
    },
    headerBackground: () => {
      return <Animated.View style={[styles.headerBackground]} />;
    },
  };
}
function App() {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="BottomTabs"
            component={BottomTabs}
            // 隐藏bottomTabs默认的顶部标题栏
            options={{headerShown: false}}
          />
          <Stack.Screen name="Detail" component={Detail} />
          <Stack.Screen
            name="Album"
            component={Album}
            options={getAlbumOptions}
          />
          <Stack.Screen
            name="Category"
            options={{
              headerTitle: '分类',
            }}>
            {props => <Category {...props} />}
          </Stack.Screen>
        </Stack.Navigator>
      </NavigationContainer>
      <StatusBar
        // 最顶部状态栏
        backgroundColor="transparent"
        barStyle="dark-content"
        translucent
      />
    </Provider>
  );
}

export default App;
